<template>
  <div class="orde-list">
    <Navigation></Navigation>

    <!-- 订单号，产品名，支付状态，查看详情，支付订单 -->
    <el-table :data="orderTable" stripe class="order-table" v-loading="orderListLoading">
      <el-table-column prop="orderId" label="订单号" align="center" />
      <el-table-column prop="goodTitle" label="产品名" align="center" />
      <el-table-column prop="payPrice" label="产品价格" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.payPrice }} 元</span>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="支付状态" align="center">
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.status === '1'">已支付</el-tag>
          <el-tag type="warning" v-else-if="scope.row.status === '2'">已过期</el-tag>
          <el-tag type="default" v-else>未支付</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" align="center">
        <template slot-scope="scope">
          <span>{{
            scope.row.createTime | dateFormat("yyyy-mm-dd hh:mm:ss")
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button class="order-opera" v-if="scope.row.status === '1' || scope.row.status === '2'" type="primary"
            @click="openDetail(scope.row.orderId)">查看详情</el-button>
          <el-button class="order-opera" v-else type="warning" @click="toPayOrder(scope.row.orderId)">支付订单</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="queryOrderList" />

    <!-- 订单详情窗口 -->
    <el-dialog title="订单详情" :visible.sync="watchingDetail">
      <div class="order-detail">
        <el-descriptions direction="vertical" :column="4" border>
          <el-descriptions-item label="订单号">{{
            orderDetail.order_id
          }}</el-descriptions-item>

          <el-descriptions-item label="产品名">{{
            orderDetail.good_title
          }}</el-descriptions-item>

          <el-descriptions-item label="产品原价">
            {{ orderDetail.price }}
            元
          </el-descriptions-item>

          <el-descriptions-item label="产品秒杀价">
            <span v-if="orderDetail.seckill_price !== null">{{ orderDetail.seckill_price }} 元</span>
          </el-descriptions-item>

          <el-descriptions-item label="支付方式">
            <el-tag type="default" v-if="orderDetail.pay_way === '1'">本地支付</el-tag>
            <el-tag type="default" v-else-if="orderDetail.pay_way === '2'">第三方支付</el-tag>
            <el-tag type="warning" v-else>未支付</el-tag>
          </el-descriptions-item>

          <el-descriptions-item label="收货人名称">
            {{ orderDetail.receiver_name }}
          </el-descriptions-item>

          <el-descriptions-item label="收货人地址">
            {{ orderDetail.receiver_addr }}
          </el-descriptions-item>

          <el-descriptions-item label="收货人电话号码">
            {{ orderDetail.receiver_phone }}
          </el-descriptions-item>

          <el-descriptions-item label="创建时间">{{
            orderDetail.create_time | dateFormat("yyyy-mm-dd hh:mm:ss")
          }}</el-descriptions-item>

          <el-descriptions-item label="支付时间">{{
            orderDetail.pay_time | dateFormat("yyyy-mm-dd hh:mm:ss")
          }}</el-descriptions-item>
        </el-descriptions>
      </div>
    </el-dialog>

    <el-dialog :append-to-body="true" :close-on-click-modal="false" :close-on-press-escape="false" title="请选择收货地址"
      :visible.sync="submitOrderDialog" width="57%" show-close="false" center>
      <AddrList mode="choose" @handleChooseAddr="handleChooseAddr" @submitOrder="handleSubmitOrder"></AddrList>
    </el-dialog>
  </div>
</template>

<script>
import { getOrder, getOrderList, notifyOrderPaySuccess, checkAddrNeeded, submitOrder } from "@/api/order";
import AddrList from '@/components/addrList'
import { dateFormat } from "@/utils/tool";

export default {
  name: "OrderList",
  components: {
    AddrList
  },
  data() {
    return {
      orderTable: null,
      orderListLoading: false,
      watchingDetail: false,
      orderDetail: {},
      queryParams: {
        pageNum: 1,
        pageSize: 5,
      },
      total: 0,

      submitOrderDialog: false,
      chooseId: 0,
      orderId: '',
    };
  },
  created() {
    this.orderListLoading = true;
    this.queryOrderList();
    this.catchUrl();
  },
  methods: {
    queryOrderList() {
      getOrderList(this.queryParams)
        .then((res) => {
          this.orderListLoading = false;
          this.orderTable = res.rows;
          this.total = res.total;
        })
        .catch((err) => {
          this.orderListLoading = false;
        });
    },

    toPayOrder(orderId) {
      checkAddrNeeded(orderId).then((res) => {
        if (res.code === 200) {
          if (res.data) this.$router.push("/payOrder/" + orderId);
          else {
            this.$message.error('请选择您的收货地址再前往支付订单');
            this.orderId = orderId
            this.submitOrderDialog = true
          }
        }
      })
    },

    catchUrl() {
      let tradeNo = this.$router.history.current.query.out_trade_no;
      let isSend = true;
      if (tradeNo !== undefined && tradeNo !== "") {
        setTimeout(() => {
          let orderList = this.orderTable;
          for (var i = 0; i < orderList.length; i++) {
            if (
              orderList[i].orderId === tradeNo &&
              orderList[i].status === "1"
            ) {
              isSend = false;
              break;
            }
          }
          if (isSend) {
            notifyOrderPaySuccess(tradeNo);
            this.queryOrderList();
          }
        }, 500);
      }
    },

    openDetail(orderId) {
      this.watchingDetail = true;
      getOrder(orderId).then((res) => {
        this.orderDetail = res.data;
      });
    },

    handleChooseAddr(addrId) {
      this.chooseId = addrId
      this.$message.success('已选择收货地址，点击提交订单按钮即可提交。')
    },

    handleSubmitOrder() {
      if (!this.chooseId) {
        this.$message.error('请选择您的收货地址')
        return false
      }

      submitOrder(this.chooseId, this.orderId).then((res) => {
        if (res.code === 200) {
          this.$message.success('订单提交成功，正在为您跳转至支付页面')
          this.$router.push(/payOrder/ + this.orderId);
        }
      })
    }

  },
};
</script>

<style>
.order-table {
  left: 15%;
  margin-top: 3%;
  width: 70%;
}

.order-opera {
  width: 100px;
  height: 35px;
  font-size: 1.1em;
  line-height: 10px;
}
</style>